<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>华南农业大学实验室报修系统</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" th:href="@{~/mobile/common.css}" type="text/css">
</head>
<body>
	<div>
		<p style="display:inline-block">您好，员工${session.cWechatUser.name!}</p>
		<a style="display:inline-block;" href="/mobile/logout.html" class="weui-btn weui-btn_mini weui-btn_warn">退出登录</a>
	</div>
	<div class="weui-tab">
		<div class="weui-navbar">
			<a class="weui-navbar__item weui-bar__item--on" href="#tab1" onclick="getData('all', $('#area1'))">
				全部
			</a>
			<a class="weui-navbar__item" href="#tab2" onclick="getData('candidate', $('#area2'))">
				待接管
			</a>
			<a class="weui-navbar__item" href="#tab3" onclick="getData('notEnd', $('#area3'))">
				未完成
			</a>
			<a class="weui-navbar__item" href="#tab4" onclick="getData('end', $('#area4'))">
				已完成
			</a>
		</div>
		<div class="weui-tab__bd">
			<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
				<div class="weui-cell after">
					<div class="weui-cell__bd">
						<label class="weui-label">开始时间从</label>
					</div>
					<div class="weui-cell__bd">
						<input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('all', $('#area1'))" />
					</div>
				</div>

				<div class="weui-cell before">
					<div class="weui-cell__bd">
						<label class="weui-label">到</label>
					</div>
					<div class="weui-cell__bd">
						<input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('all', $('#area1'))" />
					</div>
				</div>
				<div id="area1">

				</div>
				<!--

				<div class="weui-infinite-scroll">
					<div class="infinite-preloader"></div>
					正在加载...
				</div>
				-->
			</div>
			<div id="tab2" class="weui-tab__bd-item">
				<h1>待接管记录</h1>
				<div id="area2">

				</div>
			</div>
			<div id="tab3" class="weui-tab__bd-item">
				<div class="weui-cell after">
					<div class="weui-cell__bd">
						<label class="weui-label">开始时间从</label>
					</div>
					<div class="weui-cell__bd">
						<input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('notEnd', $('#area3'))" />
					</div>
				</div>

				<div class="weui-cell before">
					<div class="weui-cell__bd">
						<label class="weui-label">到</label>
					</div>
					<div class="weui-cell__bd">
						<input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('notEnd', $('#area3'))" />
					</div>
				</div>
				<div id="area3">

				</div>
			</div>
			<div id="tab4" class="weui-tab__bd-item">
				<div class="weui-cell after">
					<div class="weui-cell__bd">
						<label class="weui-label">开始时间从</label>
					</div>
					<div class="weui-cell__bd">
						<input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('end', $('#area4'))" />
					</div>
				</div>

				<div class="weui-cell before">
					<div class="weui-cell__bd">
						<label class="weui-label">到</label>
					</div>
					<div class="weui-cell__bd">
						<input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('end', $('#area4'))" />
					</div>
				</div>
				<div id="area4">

				</div>
			</div>
		</div>
	</div>

	<!-- body 最后 -->
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
	<!-- 如果使用了某些拓展插件还需要额外的JS -->
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
	<script th:src="@{~/mobile/start/HomePage.js}"></script>
	<script>
        $(document).ready(function(){
            //页面加载时，'全部'tab接收数据并显示。
            getData('all', $('#area1'));
            $(".beforeCalendar").calendar();
            $(".afterCalendar").calendar();
        });

        //获取最新数据，并清空历史内容，将新数据追加
        function getData(type, area){
            area.empty();
            var postURL = "", postType;
            if(type == "candidate"){
                postURL = "/mobile/repair/candidate";
                postType = null;
			}
			else{
                var reg = new RegExp("/","g");
                var after = area.siblings(".after").find(".afterCalendar").val().replace(reg,'-'),
                    before = area.siblings(".before").find(".beforeCalendar").val().replace(reg,'-');
                postURL = "/mobile/repair/history";
                postType = {after:after, before:before, type:type};
			}
			$.post(postURL, postType, function(result){
				if(result.statusCode == 'NO'){
					if(result.data.length == 0){
                        area.append("暂无数据");
                    }
                    else{
                        $.each(result.data, function (i, proc) {
                            area.append(getElement(proc));
                        });
                    }
				}else{
					area.append("数据接收失败！");
				}
			});
		}

		function getElement(proc) {
            var assignName = (proc.assignee == "")?'无':proc.assignee,
				endTime = (proc.endTime == null)?'未结束':proc.endTime;
			var str =
				'<div class="weui-form-preview">' +
                	'<div class="weui-form-preview__hd">' +
					'<label class="weui-form-preview__label">接管人</label>' +
					'<em class="weui-form-preview__value">' +
                				assignName+ '</em>' +
					'</div>' +
					'<div class="weui-form-preview__bd">' +
						'<div class="weui-form-preview__item">' +
						'<label class="weui-form-preview__label">流水单号</label>' +
						'<span class="weui-form-preview__value">' + proc.id + '</span>' +
						'</div>' +
						'<div class="weui-form-preview__item">' +
						'<label class="weui-form-preview__label">起始时间</label>' +
						'<span class="weui-form-preview__value">' + proc.startTime + '</span>' +
						'</div>' +
						'<div class="weui-form-preview__item">' +
						'<label class="weui-form-preview__label">结束时间</label>' +
						'<span class="weui-form-preview__value">' + endTime + '</span>' +
						'</div>' +
					'</div>' +
					'<div class="weui-form-preview__ft">' +
						'<a type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="/mobile/repair/proc/' + proc.vars.recordId + '">查看详情</a>' +
					'</div>' +
				'</div>';
			return str;
        }

        // var loading = false;  //状态标记
        // $(document.body).infinite().on("infinite", function() {
        //     if(loading) return;
        //     loading = true;
        //     setTimeout(function() {
        //         $("#tab1").append("<p> 我是新加载的内容 </p>");
        //         loading = false;
        //     }, 1500);   //模拟延迟
        // });

	</script>
</body>
</html>